<template>
    <el-table
            :data="data"
            style="width: 100%"
            :row-style="showTr">
        <el-table-column v-for="(column, index) in columns" :key="column.dataIndex"
                         :label="column.label">
            <template slot-scope="scope">
                <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
                <a class="button is-outlined is-primary is-small" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
                    <i v-if="!scope.row._expanded" class="el-icon-caret-right" aria-hidden="true"></i>
                    <i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>
                </a>
                <span v-else-if="index===0" class="ms-tree-space"></span>
                <span v-if="index === 1" v-html="parseResolution(scope.row[column.dataIndex])"></span>
                <span v-else>{{scope.row[column.dataIndex]}}</span>
            </template>
        </el-table-column>
        <el-table-column :label="$t('standard.operation')" v-if="treeType === 'normal'" width="400">
            <template slot-scope="scope">
                <button type="button" class="el-button el-button--default el-button--small" @click="info_fuc(requestUrl, scope.row)">
                    {{$t('standard.details')}}
                </button>
                <button type="button" class="el-button el-button--default el-button--small" @click="edit_fuc(requestUrl, scope.row)">
                    {{$t('standard.modify')}}
                </button>
                <!--<el-button size="small" type="danger" @click="handleDelete(scope.row.id)" v-if="false">删除</el-button>-->
                <button type="button" class="el-button el-button--success el-button--small"
                        @click="add_fuc(requestUrl, scope.row.data.id, scope.row.data.resolution)">
                    {{$t('company.newSubCompany')}}
                </button>
                <button type="button" class="el-button el-button--danger el-button--small" @click="handleDelete(scope.row.id)">
                    {{$t('standard.delete')}}
                </button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
    import dataTransfer from './dataTransfer.js';


    export default {
        name: 'tree-grid',
        props: {
            // 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
            treeStructure: {
                type: Boolean,
                default: function () {
                    return false
                }
            },
            // 这是相应的字段展示
            columns: {
                type: Array,
                default: function () {
                    return []
                }
            },
            // 这是数据源
            dataSource: {
                type: Array,
                default: function () {
                    return []
                }
            },
            // 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
            requestUrl: {
                type: String,
                default: function () {
                    return ''
                }
            },
            // 这个是是否展示操作列
            treeType: {
                type: String,
                default: function () {
                    return 'normal'
                }
            },
            // 是否默认展开所有树
            defaultExpandAll: {
                type: Boolean,
                default: function () {
                    return false
                }
            },
            delUrl: {
                type: String,
                default: function () {
                    return ''
                }
            },
            flushFuc: {
                type: Function,
                default: function () {
                    return null
                }
            }
        },
        data () {
            return {
                resolutionTypeList: this.$getDictList("device_resolution")
            }
        },
        computed: {
            // 格式化数据源
            data: function () {
                let me = this;
                if (me.treeStructure) {
                    let data = dataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll);
                    return data;
                }
                return me.dataSource;
            }
        },
        methods: {
            // 显示行
            showTr: function (row, index) {
                let show = (row.row._parent ? (row.row._parent._expanded && row.row._parent._show) : true);
                row.row._show = show;
                return show ? '' : 'display:none;'
            },
            // 展开下级
            toggle: function (trIndex) {
                let me = this;
                let record = me.data[trIndex];
                record._expanded = !record._expanded
            },
            // 显示层级关系的空格和图标
            spaceIconShow (index) {
                let me = this;
                if (me.treeStructure && index === 0) {
                    return true
                }
                return false
            },
            // 点击展开和关闭的时候，图标的切换
            toggleIconShow (index, record) {
                let me = this;
                if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {
                    return true
                }
                return false
            },
            handleDelete (id) {
                const me = this;
                this.$confirm('此操作将永久删除该记录, 是否继续?', this.$t('standard.prompt'), {
                    confirmButtonText: this.$t('standard.confirm'),
                    cancelButtonText: this.$t('standard.cancel'),
                    type: 'error'
                }).then(() => {
                    if (this.delUrl) {
                        this.axios.hPost(this.delUrl, {id: id}, (response) => {
                            if (response.success) {
                                this.$message.success(response.msg);
                                me.flushFuc(1);
                            }
                            else {
                                this.$message.error(response.msg);
                            }

                        });
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },

            edit_fuc: function (url, data) {
                this.$router.push({
                    name: url,
                    params: {
                        data: data,
                        add_sub: true
                    }
                })
            },

            info_fuc: function (url, data) {
                this.$router.push({
                    name: url,
                    params: {
                        data: data,
                        flag: true
                    }
                })
            },

            add_fuc: function (url, id, resolution) {
                this.$router.push({
                    name: url,
                    params: {
                        parentId: id,
                        resolution: resolution,
                        add_sub: true
                    }
                })
            },

            parseResolution(resolution) {
                let resolution_label = "";
                for (let i = 0; i < this.resolutionTypeList.length; i++) {
                    if (this.resolutionTypeList[i].value === resolution) {
                        resolution_label = this.resolutionTypeList[i].label;
                        break;
                    }
                }

                return resolution_label;
            }
        }
    }
</script>
<style scoped>
    .ms-tree-space {
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        width: 18px;
        height: 14px;
    }

    .ms-tree-space::before {
        content: ""
    }

    table td {
        line-height: 26px;
    }
</style>
